<template>
	<view class="flex_column" style="height: 100vh;">
		<page-head ></page-head>
		<view class="rem04" style="padding: 0px 1rem 2vh 1rem;">方淑彤 | 女
		</view>
		<view class="flex_column" style="padding: 2vh 1.2rem 1.2rem;flex: 1;">
			<view class="flex_row" style="flex: 1;">
				<view class="main-img-con">
					<image :src="imgsrc" style="width: 100%;height: 100%" mode="aspectFit">
					</image>
				</view>
			<!-- 	<image :src="imgsrc" style="border: 1px solid #44CE7B;border-radius: 20px;width: 5rem;height: 100%;min-height: 100px;" mode="aspectFit">
				</image> -->
				<view class="flex_row flex_wrap" style="margin-left: 1rem;margin-top: -0.3rem;">
					<view style="width: 15vh; padding:0 2vh 2vh 2vh;" v-for="(list,index) in list"
						class="flex_col margin_top14" @click="select(index)">
						<view style="position: relative;top:0;left:0">
							<view style="position: absolute;top: 0;left: 0;">
								<image :src="list.src" style="width: 15vh;" mode="widthFix">
								</image>
							</view>
						</view>
						<image v-if="selIndex==index" src="../../image/cjymicon/xztwsst.png" style="width: 100%;"
							mode="widthFix">
						</image>
						<image v-else src="../../image/cjymicon/thumb.png" style="width: 100%;" mode="widthFix">
						</image>
						<view class="rem03 allCenter margin_top10" style="color: #FFF;">{{list.name}}</view>
					</view>
				</view>
			</view>
			<view class="flex_row" style="justify-content: flex-end;">
				<image src="../../image/cjymicon/cxcj.png" @click="back(1)" style="height: 8vh;" mode="heightFix">
				</image>
				<image @click="back(3)" src="../../image/cjymicon/submit.png" style="height: 8vh;margin-left: 4vh;" mode="heightFix">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selIndex:0,
				list: [{
					src: require('../../image/twylt/jshw.png'),
					name: '举手后位',
					index: 0,
				}, {
					src: require('../../image/twylt/jsqw.png'),
					name: '举手前位',
					index: 1,
				}, {
					src: require('../../image/twylt/xbqw.png'),
					name: '胸部前位',
					index: 2,
				}, {
					src: require('../../image/twylt/xbhw.png'),
					name: '胸部后位',
					index: 3,
				}, {
					src: require('../../image/twylt/ztqw.png'),
					name: '整体前位',
					index: 4,
				}, {
					src: require('../../image/twylt/zthw.png'),
					name: '整体后位',
					index: 5,
				}, {
					src: require('../../image/twylt/ztzc.png'),
					name: '整体左侧位',
					index: 6,
				}, {
					src: require('../../image/twylt/ztyc.png'),
					name: '整体右侧位',
					index: 7,
				}],
				imgsrc: require('../../image/twylt/jshw.png'),
			}
		},
		methods: {
			select(e) {
				this.imgsrc = this.list[e].src,
					this.selIndex = e
			},
			back(delta=1) {
				uni.navigateBack({
					delta: delta,
				})
			},
		}
	}
</script>

<style>
	page {
		background: #171927;
	}
	.main-img-con{
		width: 55vh;
	
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #44CE7B;border-radius:2vh;
	}
</style>
